<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模型部署与应用 - 异烟酸生产收率预测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles/common.css">
    <link rel="stylesheet" href="styles/components.css">
    <link rel="stylesheet" href="styles/main-nav.css">
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="logo">
                <img src="img/python-logo.png" alt="Python工业预测模型Logo">
                <span>异烟酸生产收率预测</span>
            </div>
            <nav class="nav-menu">
                <a href="index.html" class="nav-item">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                </a>
                <a href="qd-display.html" class="nav-item">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>主控面板</span>
                </a>
                <a href="model-value.html" class="nav-item">
                    <i class="fas fa-chart-line"></i>
                    <span>模型应用价值</span>
                </a>
                <a href="system-architecture.html" class="nav-item">
                    <i class="fas fa-project-diagram"></i>
                    <span>系统架构设计</span>
                </a>
                <a href="data-flow.html" class="nav-item">
                    <i class="fas fa-database"></i>
                    <span>数据流设计</span>
                </a>
                <a href="model-deployment.html" class="nav-item active">
                    <i class="fas fa-cogs"></i>
                    <span>模型部署与应用</span>
                </a>
                <a href="ui-design.html" class="nav-item">
                    <i class="fas fa-desktop"></i>
                    <span>用户界面设计</span>
                </a>
                <a href="yield-prediction.html" class="nav-item">
                    <i class="fas fa-flask"></i>
                    <span>收率预测</span>
                </a>
                <a href="parameter-monitoring.html" class="nav-item">
                    <i class="fas fa-eye"></i>
                    <span>关键参数监控</span>
                </a>
                <a href="online-analysis.html" class="nav-item">
                    <i class="fas fa-chart-bar"></i>
                    <span>在线分析</span>
                </a>
                <a href="model-performance.html" class="nav-item">
                    <i class="fas fa-chart-pie"></i>
                    <span>模型性能</span>
                </a>
                <a href="model-details.html" class="nav-item">
                    <i class="fas fa-info-circle"></i>
                    <span>模型详情</span>
                </a>
                <a href="model-update.html" class="nav-item">
                    <i class="fas fa-sync-alt"></i>
                    <span>模型更新</span>
                </a>
                <a href="model-config.html" class="nav-item">
                    <i class="fas fa-sliders-h"></i>
                    <span>系统配置</span>
                </a>
                <a href="documentation.html" class="nav-item">
                    <i class="fas fa-book"></i>
                    <span>技术文档</span>
                </a>
            </nav>
            <div class="sidebar-footer">
                <div class="user-info">
                    <img src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png" alt="User">
                    <span>管理员</span>
                </div>
                <a href="#" class="logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                </a>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部导航栏 -->
            <header class="top-bar">
                <div class="page-title">
                    <h1>模型部署与应用</h1>
                    <p>异烟酸生产收率预测模型的部署策略与应用场景</p>
                </div>
                <div class="top-bar-actions">
                    <div class="search-bar">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索...">
                    </div>
                    <div class="notification">
                        <i class="far fa-bell"></i>
                        <span class="badge">3</span>
                    </div>
                    <div class="setting">
                        <i class="fas fa-cog"></i>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="content-wrapper">
                <!-- 顶部导航链接 -->
                <div class="navigation-links">
                    <a href="model-value.html" class="nav-link">1. 模型应用价值与落地路径</a>
                    <a href="system-architecture.html" class="nav-link">2. 系统架构设计</a>
                    <a href="data-flow.html" class="nav-link">3. 数据流设计</a>
                    <a href="model-deployment.html" class="nav-link active">4. 模型部署与应用</a>
                    <a href="ui-design.html" class="nav-link">5. 用户界面设计</a>
                    <a href="yield-prediction.html" class="nav-link">收率预测</a>
                    <a href="parameter-monitoring.html" class="nav-link">关键参数监控</a>
                </div>

                <div class="secondary-nav">
                    <a href="project-implementation.html" class="nav-link">7. 项目实施路径</a>
                </div>

                <!-- 页面内容 -->
                <div class="page-content">
                    <!-- 模型概述 -->
                    <div class="section-title">模型概述</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-brain"></i>
                            异烟酸生产收率预测模型
                        </div>
                        <p>该模型是一个基于深度学习和传统机器学习算法相结合的混合模型，专门用于预测异烟酸生产过程中的收率。模型融合了物理知识和数据驱动方法，通过分析历史生产数据和实时工艺参数，预测最终产品收率，并提供参数优化建议。</p>
                        
                        <div class="model-metrics">
                            <div class="metric-item">
                                <div class="metric-icon"><i class="fas fa-bullseye"></i></div>
                                <div class="metric-info">
                                    <div class="metric-name">预测准确率</div>
                                    <div class="metric-value">93.8%</div>
                                </div>
                            </div>
                            <div class="metric-item">
                                <div class="metric-icon"><i class="fas fa-chart-line"></i></div>
                                <div class="metric-info">
                                    <div class="metric-name">RMSE</div>
                                    <div class="metric-value">0.85%</div>
                                </div>
                            </div>
                            <div class="metric-item">
                                <div class="metric-icon"><i class="fas fa-bolt"></i></div>
                                <div class="metric-info">
                                    <div class="metric-name">推理时间</div>
                                    <div class="metric-value">150ms</div>
                                </div>
                            </div>
                            <div class="metric-item">
                                <div class="metric-icon"><i class="fas fa-memory"></i></div>
                                <div class="metric-info">
                                    <div class="metric-name">模型大小</div>
                                    <div class="metric-value">56MB</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 模型架构 -->
                    <div class="section-title">模型架构</div>
                    
                    <div class="info-grid">
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-layer-group"></i>
                            </div>
                            <div class="info-card-title">多层感知机模块</div>
                            <div class="info-card-text">
                                处理静态特征，如原料成分、批次信息等非时序数据。包含3个全连接层，隐藏单元数分别为256、128和64。
                            </div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-wave-square"></i>
                            </div>
                            <div class="info-card-title">LSTM-GRU模块</div>
                            <div class="info-card-text">
                                处理时序特征，如温度、压力、pH值等时间序列数据。双向LSTM和GRU结构，能够捕捉长短期依赖关系。
                            </div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-code-branch"></i>
                            </div>
                            <div class="info-card-title">物理约束模块</div>
                            <div class="info-card-text">
                                融合化学反应动力学知识，将物理约束条件嵌入到神经网络中，提高模型的可解释性和鲁棒性。
                            </div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-random"></i>
                            </div>
                            <div class="info-card-title">集成模块</div>
                            <div class="info-card-text">
                                集成多个子模型的输出，包括深度学习模型和梯度提升树模型，通过加权融合提高整体预测性能。
                            </div>
                        </div>
                    </div>
                    
                    <div class="architecture-diagram">
                        <img src="https://via.placeholder.com/800x400?text=异烟酸生产收率预测模型架构图" alt="模型架构图" style="width: 100%; max-width: 800px; margin: 20px auto; display: block;">
                    </div>
                    
                    <!-- 部署策略 -->
                    <div class="section-title">部署策略</div>
                    
                    <div class="value-cards">
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-boxes"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">容器化部署</div>
                                <div class="value-desc">使用Docker容器封装模型和依赖项，通过Kubernetes进行编排和管理，实现弹性伸缩和高可用。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-server"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">模型服务化</div>
                                <div class="value-desc">将模型部署为RESTful API服务，通过TensorFlow Serving或ONNX Runtime提供高性能推理能力。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-sync-alt"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">持续集成与部署</div>
                                <div class="value-desc">建立CI/CD流水线，实现模型训练、验证、部署的自动化，支持蓝绿发布和金丝雀发布。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-microchip"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">边缘计算部署</div>
                                <div class="value-desc">部分轻量级模型部署在边缘设备上，实现低延迟推理，减少网络传输开销。</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 应用场景 -->
                    <div class="section-title">应用场景</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-lightbulb"></i>
                            关键应用场景
                        </div>
                        
                        <div class="scene-grid">
                            <div class="scene-item">
                                <div class="scene-icon">
                                    <i class="fas fa-chart-line"></i>
                                </div>
                                <div class="scene-content">
                                    <div class="scene-title">实时收率预测</div>
                                    <div class="scene-desc">
                                        在生产过程中实时预测最终收率，为操作人员提供直观反馈，及时调整生产参数。
                                    </div>
                                </div>
                            </div>
                            
                            <div class="scene-item">
                                <div class="scene-icon">
                                    <i class="fas fa-sliders-h"></i>
                                </div>
                                <div class="scene-content">
                                    <div class="scene-title">参数优化建议</div>
                                    <div class="scene-desc">
                                        基于当前工况，推荐最优的工艺参数组合，以提高收率和产品质量。
                                    </div>
                                </div>
                            </div>
                            
                            <div class="scene-item">
                                <div class="scene-icon">
                                    <i class="fas fa-exclamation-triangle"></i>
                                </div>
                                <div class="scene-content">
                                    <div class="scene-title">异常工况预警</div>
                                    <div class="scene-desc">
                                        监测生产过程中的异常工况，及时发出预警，避免收率下降和质量问题。
                                    </div>
                                </div>
                            </div>
                            
                            <div class="scene-item">
                                <div class="scene-icon">
                                    <i class="fas fa-flask"></i>
                                </div>
                                <div class="scene-content">
                                    <div class="scene-title">配方优化</div>
                                    <div class="scene-desc">
                                        根据历史数据分析和模型预测，优化生产配方，提高原料利用率。
                                    </div>
                                </div>
                            </div>
                            
                            <div class="scene-item">
                                <div class="scene-icon">
                                    <i class="fas fa-calendar-alt"></i>
                                </div>
                                <div class="scene-content">
                                    <div class="scene-title">生产计划优化</div>
                                    <div class="scene-desc">
                                        结合收率预测和产能规划，优化生产排期，提高整体生产效率。
                                    </div>
                                </div>
                            </div>
                            
                            <div class="scene-item">
                                <div class="scene-icon">
                                    <i class="fas fa-search"></i>
                                </div>
                                <div class="scene-content">
                                    <div class="scene-title">问题根因分析</div>
                                    <div class="scene-desc">
                                        当收率异常时，分析可能的根本原因，提供诊断和改进建议。
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 监控与维护 -->
                    <div class="section-title">模型监控与维护</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-heartbeat"></i>
                            模型健康监控
                        </div>
                        <ul style="padding-left: 20px; margin-top: 10px;">
                            <li><strong>性能指标监控：</strong>实时追踪模型预测准确率、召回率、F1分数等关键指标</li>
                            <li><strong>数据漂移检测：</strong>监控输入特征分布变化，及时发现数据漂移问题</li>
                            <li><strong>资源利用监控：</strong>监控CPU、内存、GPU使用率，确保系统资源合理分配</li>
                            <li><strong>日志分析：</strong>自动分析模型日志，发现潜在问题和异常</li>
                            <li><strong>A/B测试：</strong>支持新旧模型并行部署和对比测试</li>
                        </ul>
                    </div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-wrench"></i>
                            模型维护与更新
                        </div>
                        <ul style="padding-left: 20px; margin-top: 10px;">
                            <li><strong>定期再训练：</strong>每月使用最新数据对模型进行再训练，保持模型时效性</li>
                            <li><strong>增量学习：</strong>支持增量学习，不断吸收新数据中的知识</li>
                            <li><strong>模型回滚：</strong>当新模型性能不佳时，快速回滚到稳定版本</li>
                            <li><strong>版本管理：</strong>完整的模型版本管理和变更记录</li>
                            <li><strong>模型解释：</strong>定期生成模型解释报告，提高可解释性和可信度</li>
                        </ul>
                    </div>
                    
                    <!-- 性能优化 -->
                    <div class="section-title">性能优化</div>
                    
                    <div class="value-cards">
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-compress-arrows-alt"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">模型量化</div>
                                <div class="value-desc">使用INT8量化技术将模型权重从FP32转为INT8，模型大小减少75%，推理速度提升3.2倍。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-cut"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">模型剪枝</div>
                                <div class="value-desc">移除对预测结果贡献较小的神经元和连接，模型参数减少40%，性能损失小于1%。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-code"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">算子优化</div>
                                <div class="value-desc">使用TensorRT进行算子融合和优化，推理时间降低45%，吞吐量提升85%。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-rocket"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">批处理推理</div>
                                <div class="value-desc">使用批处理模式进行推理，优化GPU利用率，单位时间处理能力提升3倍。</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript引用 -->
    <script src="scripts/common.js"></script>
    <script src="scripts/main-nav.js"></script>

    <style>
        /* 页面特有样式 */
        .model-metrics {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 20px;
        }
        
        .metric-item {
            display: flex;
            align-items: center;
            padding: 15px;
            background: var(--gray-light);
            border-radius: var(--radius);
            min-width: 200px;
        }
        
        .metric-icon {
            width: 40px;
            height: 40px;
            background: var(--primary-gradient);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: white;
            font-size: 1.2rem;
        }
        
        .metric-name {
            font-size: 0.9rem;
            color: var(--gray);
            margin-bottom: 5px;
        }
        
        .metric-value {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--primary-dark);
        }
        
        .scene-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .scene-item {
            display: flex;
            padding: 15px;
            background: var(--gray-light);
            border-radius: var(--radius);
            transition: all 0.3s;
        }
        
        .scene-item:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
            background: rgba(33, 150, 243, 0.05);
        }
        
        .scene-icon {
            width: 50px;
            height: 50px;
            background: var(--primary-gradient);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: white;
            font-size: 1.5rem;
        }
        
        .scene-title {
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--primary-dark);
        }
        
        .scene-desc {
            font-size: 0.9rem;
            color: var(--gray);
            line-height: 1.5;
        }
    </style>
</body>
</html> 